<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redux 计数器</title>
    <script src="https://unpkg.com/redux@4.2.1/dist/redux.min.js"></script>
</head>
<body>

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>

<script>
    // 定义reducer函数
    // 内部主要的工作是根据不同的action 返回不同的state
    function counterReducer (state = { count: 0 }, action) {
        switch (action.type) {
            case 'INCREMENT':
                return { count: state.count + 1 }
            case 'DECREMENT':
                return { count: state.count - 1 }
            default:
                return state
        }
    }
    // 使用reducer函数生成store实例
    const store = Redux.createStore(counterReducer)

    // 订阅数据变化
    store.subscribe(() => {
        console.log(store.getState())
        document.getElementById('count').innerText = store.getState().count

    })
    // 增
    const inBtn = document.getElementById('increment')
    inBtn.addEventListener('click', () => {
        store.dispatch({
            type: 'INCREMENT'
        })
    })
    // 减
    const dBtn = document.getElementById('decrement')
    dBtn.addEventListener('click', () => {
        store.dispatch({
            type: 'DECREMENT'
        })
    })
</script>
</body>
</html>